<template>
  <el-drawer size="50%" :model-value="props.visible" @close="handleClose" @open="open">
    <el-form :model="form" label-width="auto">
      <el-form-item label="配置">
        <el-select v-model="form.modelId" placeholder="请选择模型" @change="handelchange">
          <el-option v-for="(item, index) in list" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { modelList } from "@/api/chat";
import { ModelTypeCace } from "@/types/chat.type";
import { useChatStoreWithOut } from "@/store/modules/chat";
import { updateUserInfo } from "@/api/user-app";
const chatStore = useChatStoreWithOut();
const emit = defineEmits(["update:visible"]);
const props = defineProps<{ visible: boolean }>();

const form = reactive({
  modelId: chatStore.getCurrentModelId,
});
const list = ref<Array<ModelTypeCace>>(chatStore.getModelsList);
watch(() => chatStore.getModelsList, (v) => {
  list.value = chatStore.getModelsList
}, { immediate: true })

watch(() => chatStore.getCurrentModelId, (v) => {
  form.modelId = chatStore.getCurrentModelId
}, { immediate: true })

const handleClose = () => {
  emit("update:visible", false);
};

const handelchange = async (v: number) => {

  const data = list.value.find(e => e.id == v)
  if (data) {
    const models = data.models.split(',')
    chatStore.setModels(models)
    chatStore.setCurrentModel(models[0])
  }
  const id = chatStore.getCurrentModelId
  if (id != v) {
    updateUserInfo({ modelId: v, modelName: chatStore.getCurrentModel })
  }
  chatStore.setCurrentModelId(v)
}
const open = () => {
};
</script>
<style lang="scss" scoped></style>
